import React, { Component } from 'react'
import Styles from './home.less'
import { BannerHome } from 'containers/banner'
import { home } from 'constants/home'
import { api } from 'common/js/ajax'
import { Link } from 'react-router-dom'
import Tabs from 'containers/tabs'
import pointer from 'components/pointer'
import classnames from 'classnames'
function Header(props) {
    const { main, sub } = props.title
    return (
        <header className={Styles.moduleHeader}>
            <div className={Styles.mainTitle}>
                {main}
            </div>
            <div className={Styles.subTitle}>
                {sub}
            </div>
        </header>
    )
}
class Service extends Component {
    constructor() {
        super()
        this.serviceRef = React.createRef()
        this.scrollEvent = this.scrollEvent.bind(this)
        this.state = {
            fadeInUp: false
        }
    }
    componentDidMount() {
        this.viewState = window.innerHeight > this.serviceRef.current.getBoundingClientRect().y
        window.addEventListener('scroll', this.scrollEvent)    
    }
    componentWillUnmount() {
        window.removeEventListener('scroll', this.scrollEvent)
    }
    scrollEvent() {
        let newInViewState = window.innerHeight > this.serviceRef.current.getBoundingClientRect().y
        !this.viewState && newInViewState && this.setState({
            fadeInUp: true,
        }, () => {
            const _this = this
            window.setTimeout(this.setState.bind(_this), 1500, {fadeInUp: false})
        })
        this.viewState = newInViewState
    }
    render() {
        const { serviceList, title } = home.service
        const { fadeInUp } = this.state
        return (
            <div className={Styles.service} ref={this.serviceRef}>
                <Header title={title}/>
                <ul className={Styles.serviceList}>
                    {
                        serviceList.map((item, index) => (<li key={item.name} style={{animationDelay: `${100*index}ms`}} className={classnames(Styles.field, {'fadeInUp': fadeInUp}, 'animated', 'fast')}>
                            <h3 className={Styles.serviceItemTitle}>{item.name}</h3>
                            <img src={item.backgroundImg} className={Styles.serviceBackground}/>
                            <div className={classnames(Styles.hoverCover, {[Styles.hoverCoverAnimated]: !fadeInUp})}>
                                <ul className={Styles.serviceExplain}>
                                    {item.details.map((entity) => (
                                        <li key={entity} key={entity} className={Styles.serviceExplainItem}>{entity}</li>
                                    ))}
                                </ul>
                                {/* <svg t="1541571225830" className={Styles.rightBottomArrow} viewBox="0 0 1024 1024"><path d="M75.909 531.342h825.666l-323.375 323.356c-7.471 7.471-7.358 19.361 0.037 26.776 7.452 7.452 19.456 7.377 26.889-0.076l353.242-353.451c5.158-3.394 8.742-8.951 8.742-15.568 0-4.722-1.896-8.875-4.722-12.193l0.171-0.228-0.986-0.986c-0.019-0.019-0.038-0.038-0.057-0.057l-356.428-356.428c-7.301-7.301-19.418-7.415-26.833-0.019-7.452 7.452-7.433 19.399-0.037 26.776l324.153 324.172h-826.464c-10.581 0-19.020 8.495-19.020 18.963 0 10.543 8.514 18.963 19.020 18.963z" p-id="1517"></path></svg> */}
                            </div>
                        </li>))
                    }
                </ul>
            </div>
        )
    }
}
function MoreBtn(props) {
    return (
        <Link className={Styles.moreBtn} to={props.skipTo}><span>MORE</span><svg t="1540869036204" viewBox="0 0 1024 1024" version="1.1" p-id="1921" width="12" height="12"><defs><style type="text/css"></style></defs><path d="M439.62624 0 388.4608 51.16416 388.4608 51.16416 848.94976 511.64288 388.4608 972.13568 439.62624 1023.30112 951.28064 511.64288Z" p-id="1922"></path></svg></Link>
    )
}
function NewsSection(props) {
    const { title, abstract, type, id } = props
    const pic = type == 1 ? '/static/image/news1.jpg' : type == 2 ? '/static/image/news2.png' : '/static/image/news3.png'
    return (
        <div className={Styles.newsSection}>
            <div className={Styles.newsMainContainer}>
                <Link className={Styles.newsTitle} to={`/newsDetail/${id}/${type}`}>{title}</Link>
                <Link className={Styles.newsMain} to={`/newsDetail/${id}/${type}`}>{abstract}</Link>
                <MoreBtn skipTo="/news"/>
            </div>
            <img src={pic} className={Styles.newsPic}/>
        </div>
    )
}
class News extends Component {
    constructor() {
        super()
        this.state = {
            news: []
        }
        this._getNews = this._getNews.bind(this)
    }
    componentDidMount() {
        this._getNews()
    }
    async _getNews() {
        let data = await api.get('/api/news')
        data = pointer(data).data([])
        this.setState({
            news: data
        })
    }
    render() {
        const TabPane = Tabs.TabPane
        const { title, newsType } = home.news
        const { news } = this.state
        return (
            <div className={Styles.news}>
                <Header title={title}/>
                <div className={Styles.newsContainer}>
                    <Tabs>
                        {newsType.map((item, index) => (
                            <TabPane tab={item.name} key={item.id}>
                                {news[index] ? (
                                <NewsSection title={news[index].title} abstract={news[index].abstract} id={news[index].id} type={news[index].type}/>) : null}
                            </TabPane>
                        ))}
                    </Tabs>
                </div>
            </div>
        )
    }
}
class Cooperation extends Component {
    render() {
        const { title, partnerRegion } = home.partner
        const TabPane = Tabs.TabPane
        return (
            <div className={Styles.cooperation}>
                <Header title={title}/>
                <div className={Styles.cooperationContainer}>
                    <Tabs>
                        {partnerRegion.map(item => (
                            <TabPane tab={item.name} key={item.id}>
                                <div className={Styles.cooperationItemContainer}>
                                    {item.children.map((entity, index) => (
                                        <div className={Styles.cooperationItem} 
                                            key={entity.name}>
                                            <img src={entity.pic} className={Styles.cooperationLogo}/>
                                        </div>
                                    ))}
                                </div>
                                {/* <MoreBtn/> */}
                            </TabPane>
                        ))}
                    </Tabs>
                </div>
            </div>
        )
    }
}
export default class Home extends Component {
    constructor() {
        super()
        this.skipToAbout = this.skipToAbout.bind(this)
    }
    skipToAbout() {
        this.props.history.push('/about')
    }
    render() {
        const { title, slogan, others, btn} = home.banner
        return (
            <div className={Styles.home}>
                <BannerHome backgroundImg="/static/image/home.gif">
                    <h2 className={classnames(Styles.title, 'animated', 'fadeInDown')}>{title}</h2>
                    <h1 className={classnames(Styles.slogan, 'animated', 'fadeInLeft')}>{slogan}</h1>
                    <div className={Styles.strip}></div>
                        {
                            others.map((item, index) => (<p className={classnames(Styles.enSlogan, 'animated', 'fadeInLeft', `delay-${300*(index+1)}ms`)} key={item}>{item}</p>))
                        }
                    <div className={Styles.learnMore} onClick={this.skipToAbout}><span>{btn}</span><svg t="1540869036204" viewBox="0 0 1024 1024" version="1.1" p-id="1921" width="20" height="20"><defs><style type="text/css"></style></defs><path d="M439.62624 0 388.4608 51.16416 388.4608 51.16416 848.94976 511.64288 388.4608 972.13568 439.62624 1023.30112 951.28064 511.64288Z" p-id="1922" fill="#fff"></path></svg></div>
                </BannerHome>
                <Service/>
                <News/>
                <Cooperation/>
            </div>
        )
    }
}
